<template>
  <div class="todo-item" v-bind:class="{ 'is-complete': todo.done }">
    <el-button
      type="success"
      icon="el-icon-check"
      circle
      v-if="!todo.done"
      @click="$emit('mark-complete', todo)"
      class="check"
      size="mini"
    ></el-button>
    <i
      v-if="todo.done"
      class="el-icon-refresh-right check"
      @click="$emit('mark-complete', todo)"
    ></i>
    {{ todo.content }}
    <el-popconfirm
      title="Are you sure delete this todo？"
      @confirm="$emit('del-todo', todo.id)"
      class="del"
      confirm-button-text="yes"
      cancel-button-text="no"
    >
      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
        size="mini"
        slot="reference"
      ></el-button>
    </el-popconfirm>
  </div>
</template>

<script>
  export default {
    name: "TodoItem",
    props: ["todo"],
    methods: {},
  }
</script>

<style scoped>
  .todo-item {
    background: #f0ecebe3;
    margin: 30px;
    padding: 10px;
    font-family: "Helvetica Neue";
    border-radius: 30px;
    box-shadow: 0 2px 4px rgba(156, 106, 44, 0.925), 0 0 6px rgb(245, 236, 236);
  }
  .is-complete {
    text-decoration: line-through;
  }
  .del {
    cursor: pointer;
    float: right;
  }
  .check {
    cursor: pointer;
    float: left;
  }
</style>
